const { ipcRenderer } = require('electron')
const { $, convertDuration } = require('./helper')

let musicAudio = new Audio()
let allTracks
let currentTracks

$('add-music-button').addEventListener('click', () => {
  ipcRenderer.send('add-music-window')
})

const renderListHTML = (tracks) => {
  const tracksList = $('tracksList')
  const tracksListHTML = tracks.reduce((html, track) => {
    html += `<li class="row music-tracks list-group-item d-flex justifly-content-between align-item-center">
      <div class="col-10">
        <i class="fas fa-music mr-2 text-secondary"></i>
        <strong>${track.fileName}</strong>
      </div>
      <div class="col-2">
        <i class="fas fa-play mr-3" data-id="${track.id}"></i>
        <i class="fas fa-trash-alt" data-id="${track.id}"></i>
      </div>
    </li>`
    return html
  }, '')
  const emptyTracksHTML = '<div class="alert alert-primary">还没有添加任何音乐</div>'
  tracksList.innerHTML = tracks.length ? `<ul class="list-group">${tracksListHTML}</ul>` : emptyTracksHTML
}

const renderPlayerHTML = (name, duration) => {
  const player = $('player-status')
  const html = `<div class="col-8 font-weight-bold">
                正在播放：${name}
                </div>
                <div class="col-4">
                  <span id="current-seeker">00:00</span> / ${convertDuration(duration)}
                </div>
                `
  player.innerHTML = html
}

const updateProgressHTML = (currentTime, duration) => {
  const seeker = $('current-seeker')
  const bar = $('player-progress')
  const progress = parseInt(currentTime / duration * 100)

  seeker.innerHTML = convertDuration(currentTime)
  
  bar.style.width = progress + '%'
  bar.innerHTML = progress + '%'

  // 播放完成，暂停图标缓存播放图标
  if(currentTime ==  duration) {
    $('.fa-pause').classList.replace('fa-pause', 'fa-play')
  }
}

ipcRenderer.on('getTracks', (event, tracks) => {
  allTracks = tracks
  renderListHTML(tracks)
})

musicAudio.addEventListener('loadedmetadata', () => {
  // 渲染播放器状态
  renderPlayerHTML(currentTracks.fileName, musicAudio.duration)
})

musicAudio.addEventListener('timeupdate', () => {
  // 更新播放器状态
  updateProgressHTML(musicAudio.currentTime, musicAudio.duration)
})

$('tracksList').addEventListener('click', (event) => {
  event.preventDefault()
  let { dataset, classList } = event.target
   let id = dataset && dataset.id
   if(id && classList.contains('fa-play')) {
    //  播放音乐
     if(currentTracks && currentTracks.id === id) {
       // 继续播放音乐
       musicAudio.play()
     } else {
       // 播放新的音乐，注意其他暂停图标还原为播放图标
       currentTracks = allTracks.find((track) => track.id === id)
       musicAudio.src = currentTracks.path
       musicAudio.play()
       const resetIconEle = document.querySelector('.fa-pause')
       if(resetIconEle) {
         resetIconEle.classList.replace('fa-pause', 'fa-play')
       }
     }
     classList.replace('fa-play', 'fa-pause')
   } else if(id && classList.contains('fa-pause')) {
    //  暂停播放逻辑
    musicAudio.pause()
    classList.replace('fa-pause', 'fa-play')
   } else if(id && classList.contains('fa-trash-alt')) {
     // 发送事件，删除当条音乐
     ipcRenderer.send('delete-tracks', id)
   }
})